<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>上传文件</title>
  <link rel="stylesheet" href="../css/uikit.min.css">
  <!-- <link rel="stylesheet" href="../css/tailwind.min.css"> -->

  <script src="../javaScript/uikit.min.js"></script>
  <script src="../javaScript/uikit-icons.min.js"></script>
  <style>
    .content_ {
      width: 100%;
      display: flex;
      box-sizing: border-box;
    }

    .update_ {
      width: 50%;
      padding: 0 15px;
    }

    .titleDec {
      background: #d8d8d8;
      border-radius: 4px;
      line-height: 40px;
      padding: 10px;
    }

    @media screen and (max-width: 992px) {
      .update_ {
        width: 100%;
        box-sizing: border-box;
      }

      .content_ {
        display: block;
        box-sizing: border-box;
      }

      .placeholder_ {
        display: none !important;
      }
    }
  </style>
</head>

<body style="background-color: #e7e7e7; min-height: 100vh;">
  <div style="text-align: center;background-color: #f5b128; font-size: 20px; padding: 15px; margin-bottom: 20px;">
    <div style="margin-bottom: 10px;">默认上传到的用户名是 _myDefault，任何人都可看到上传的文件。若想上传到其他用户，请先创建用户之后再上传。创建用户请点击《查看上传文件和下载》按钮
    </div>
    <em>默认用户上传的文件有效期为1天，其他用户上传的文件有效期为10天，10天后将被删除，请在文件有效期内做好文件备份工作！</em>
  </div>

  <div class="content_">
    <div class="update_" style="margin-bottom: 20px;">

      <div class="js-upload" uk-form-custom style="width: 100%;">
        <input type="file" multiple>
        <button class="uk-button uk-button-danger uk-button-large uk-width-1-1 uk-margin-small-bottom" type="button"
          tabindex="-1" style="height: 100px; background-color: #336699; font-size: 20px;">上传文件</button>
      </div>

      <div class="js-upload uk-placeholder uk-text-center placeholder_"
        style="border: 2px #336699 dashed; background: #e5f2ff; font-size: 20px; height: 20vh; display: flex; justify-content: center; align-items: center;">
        <span uk-icon="icon: cloud-upload"></span>
        <span class="uk-text-middle">将要上传的文件拖拽到此处</span>
        <div uk-form-custom>
          <input type="file" multiple>
          <!-- <span class="uk-link">点击这里</span> -->
          <!-- <button class="uk-button uk-button-danger" type="button" tabindex="-1" hidden>点击这里</button> -->
        </div>
      </div>
      <!-- 进度条 -->
      <progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>

      <button class="uk-button uk-button-secondary uk-width-1-1 uk-margin-small-bottom"
        style="height: 60px; word-break: keep-all;background-color: #188888; font-size: 20px;"
        onclick="openNewWindow(this)">查看上传文件和下载</button>

    </div>

    <!-- <hr style="border-bottom: 4px solid #dfd3d3;"> -->

    <div class="update_" style="padding-bottom: 200px;">
      <h4 class="titleDec">上传成功的文件如下</h4>
      <ul class="uk-list uk-list-striped" id="listFiles" style="font-size: 18px;">
        <!-- <li>你猜猜我是谁啊.jpg</li> -->
      </ul>
    </div>
  </div>

  <script>
    let search = decodeURIComponent(location.search.replaceAll('?message=', ''))
    document.title = search && "【" + search + '】 收集文件，请上传文件' || '请上传文件';

    var bar = document.getElementById('js-progressbar');
    UIkit.upload('.js-upload', {
      url: '/updateFiles',
      multiple: true,
      beforeSend: function (environment) {
        // console.log('beforeSend', arguments);
        // The environment object can still be modified here. 
        // var {data, method, headers, xhr, responseType} = environment;
        let hash = location.hash.substring(1);
        environment.headers['username'] = hash ? hash : '_myDefault'
        // console.log('environment   ---  ', environment)
      },
      beforeAll: function () {
        // console.log('beforeAll', arguments);
      },
      load: function () {
        // console.log('load', arguments);
      },
      error: function () {
        // console.log('error', arguments);
      },
      complete: function () {
        // console.log('complete===', arguments);
        let resp = arguments[0].response
        // console.log('', resp)
        // console.log('', JSON.parse(resp))
        let data = JSON.parse(resp)
        var oLi = document.createElement("li");
        oLi.innerHTML = data.filename
        document.getElementById("listFiles").appendChild(oLi)
      },
      loadStart: function (e) {
        // console.log('loadStart', arguments);

        bar.removeAttribute('hidden');
        bar.max = e.total;
        bar.value = e.loaded;
      },
      progress: function (e) {
        // console.log('progress', arguments);
        bar.max = e.total;
        bar.value = e.loaded;
      },
      loadEnd: function (e) {
        // console.log('loadEnd', arguments);
        bar.max = e.total;
        bar.value = e.loaded;
      },
      completeAll: function () {
        // console.log('completeAll', arguments);
        setTimeout(function () {
          bar.setAttribute('hidden', 'hidden');
        }, 1000);
        // alert('Upload Completed');
      }
    });

    function openNewWindow(event) {
      // console.log('siojo====', event)
      window.open('/pages/showFiles.html', 'downloadFiles')
    }
  </script>

</body>

</html>